<template>
  <div class="case-history">
    <van-nav-bar :title="result.name" />
    <div class="avator">
      <van-image
        round
        width="4rem"
        height="4rem"
        src="https://img01.yzcdn.cn/vant/cat.jpeg"
      />
      <van-icon name="plus" size="2rem" class="plus" />
    </div>
    <div class="timeline">
      <el-timeline>
        <el-timeline-item
        :timestamp="item.time"
        placement="top"
        v-for="item in cases"
        :key="item.id"
        >
          <el-card>
            <h4>{{item.location}}</h4>
            <p>{{item.department}}</p>
            <p>{{item.doctor}}</p>
            <p>￥{{item.price}}（已支付）</p>
            <hr />
            <p style="float: right" @click="toRate(item.id)">
              去评价<van-icon name="arrow" />
            </p>
          </el-card>
        </el-timeline-item>
        <!-- <el-timeline-item timestamp="2018/4/3" placement="top">
          <el-card>
            <h4>更新 Github 模板</h4>
            <p>王小虎 提交于 2018/4/3 20:46</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item timestamp="2018/4/2" placement="top">
          <el-card>
            <h4>更新 Github 模板</h4>
            <p>王小虎 提交于 2018/4/2 20:46</p>
          </el-card>
        </el-timeline-item>-->
      </el-timeline>
    </div>
  </div>
</template>

<script>
import { getCase } from '@/api/case'
export default {
  name: 'CaseHistory',
  data () {
    return {
      cases: [],
      result: {}
    }
  },
  async created () {
    console.log(this.$route)
    const result = await getCase()
    console.log(result)
    this.result = result
    this.cases = result.history
  },
  methods: {
    toRate (id) {
      console.log(id)
      this.$router.push('/casehistory/rate/' + id)
    }
  }
}
</script>

<style lang="less" scoped>
.avator {
  height: 5rem;
  display: flex;
  align-items: center;
  padding-left: 60px;
  .plus {
    margin-left: 10px;
  }
}
.timeline {
  width: 80%;
  margin-left: 60px;
  margin-top: 20px;
}
@import url("//unpkg.com/element-ui@2.15.1/lib/theme-chalk/index.css");
</style>
